<template>
  <el-container>
    <el-aside>
      <h1>浙江车检检汽车服务有限公司</h1>
      <!-- <el-avatar :size="80" :src="currentUser.avatarUrl"></el-avatar> -->
      <el-avatar :size="80"
                 src="https://cartest.zjcjj.net/logo.png"></el-avatar>
      <p class="user-name">欢迎您,{{currentUser.username}} <i class="el-icon-switch-button"
           slot="reference"
           @click="logout"></i></p>
      <el-menu router
               default-active="1"
               class="el-menu-vertical-demo"
               text-color="#303133"
               active-text-color="#011824"
               @open="handleOpen"
               @close="handleClose"
               @select="handleSelect">
        <el-submenu :index="item.path"
                    @open="handleOpen"
                    @close="handleClose"
                    :class="activeMenu==index+2?'active-menu':''"
                    v-for="(item,index) in menus"
                    :key="item.id">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item :index="subItem.path"
                        v-for="(subItem) in item.children"
                        :key="subItem.id">
            <i :class="subItem.icon"></i>
            {{subItem.name}}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-main>
      <router-view />
    </el-main>
    <el-backtop target=".el-main"></el-backtop>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '0',
      currentUser: null,
      menus: null,
    }
  },
  async created() {
    this.currentUser = this.$store.state.LoginModule.currentUser;
    const { data } = await this.$http.post('/sysUser/getUserMenus', this.currentUser)
    if (data.code) {
      this.menus=data.object;
    } else {
      Message.error(data.message)
    }
  },
  methods: {
    handleOpen: function (key, keyPath) {
      this.activeMenu = key
    },
    handleClose: function (key, keyPath) {
      this.activeMenu = key
    },
    handleSelect: function (key, keyPath) {
      this.activeMenu = key
    },
    logout: function () {
      this.$store.commit('LoginModule/clearUser')
      this.$store.commit('LoginModule/clearToken')

      localStorage.removeItem('currentUser')
      localStorage.removeItem('token')
      this.$router.replace('/login')
    },
  },
}
</script>
<style scoped>
#app {
  box-shadow: 0px 0px -40px 0px rgba(2, 24, 35, 0.1);
}
.el-container {
  height: 100%;
  background: #f6fafd;
}
.el-aside {
  padding: 0 12px;
  margin-right: 10px;
  width: 214px !important;
  box-shadow: 0px 0px 40px 0px rgba(2, 25, 35, 0.1);
}
.el-aside h1 {
  margin-top: 30px;
  text-align: center;
  font-size: 20px;
  font-family: PingFangSC;
  font-weight: 500;
  color: #333333;
}
.el-avatar {
  /* margin: 32px 50% 21px;
  transform: translateX(-50%); */
  display: block;
  margin: 32px auto 21px;
}
.user-name {
  text-align: center;
  font-size: 18px;
  font-family: PingFangSC;
  font-weight: 500;
  color: #333333;
}
.el-menu {
  margin-top: 20px;
  border: none;
}
.first-page-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url('../assets/images/Feed.png');
  background-size: cover;
  margin-right: 13px;
}
.seconed-page-icon {
  display: inline-block;
  width: 18px;
  height: 24px;
  background: url('../assets/images/Dashboard.png');
  background-size: cover;
  margin-right: 13px;
}
.sub-page-icon {
  display: inline-block;
  width: 8px;
  height: 13px;
  background: url('../assets/images/arrow.png');
  background-size: cover;
  margin-right: 13px;
}
.active-menu {
  background: linear-gradient(0deg, #57b7e3, #5798e3);
  /* box-shadow: 0px 14px 24px 0px rgba(8, 96, 137, 0.4); */
  border-radius: 4px;
  color: white;
}
.active-menu i,.active-menu span{
  color: white;
}
</style>
